<link rel="import" href="../../polymer.html">

<dom-module id="x-gestures">
  <template>
    <style>
      #inner {
        height: 100px;
        width: 100px;
        background: blue;
      }
      #prevent {
        height: 100px;
        width: 100px;
        background: red;
      }
    </style>
    <div id="prevent" on-down="preventTap"></div>
    <a href="#" on-click="linkclick" on-touchend="removeLink">LINK</a>
    <div id="inner" on-tap="divtap"></div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-gestures',
    listeners: {
      'tap': 'logger',
      'down': 'logger',
      'up': 'logger',
      'click': 'logger',
      'track': 'track'
    },
    preventTap: function(e, detail) {
      detail.prevent('tap');
      detail.prevent('track');
      e.preventDefault();
    },
    logger: function(e, detail) {
      console.log(e.type);
      console.log(detail);
      console.log(e.target);
    },
    track: function(e, detail) {
      this.logger(e, detail);
      if (detail.state === 'end') {
        console.log(detail.hover());
      }
    },
    linkclick: function(e) {
      console.log('CLICK!');
    },
    removeLink: function(e) {
      console.log('REMOVE!');
      e.target.remove();
    },
    divtap: function(e) {
      console.log('div tap!');
    }
  });
</script>
